<template>
	<view>
		<view class="acco">
<<<<<<< HEAD
		<!-- 输入框 -->
		<view class="acco1">
			<view class="acco1-1">
				<view class="acco1-11">
					收款户名
				</view>
				<view class="acco1-12">
					<u-input v-model="value" :type="type" :border="border" placeholder="请输入名称" input-align="right"/>
				</view>
			</view>
			<view class="acco1-1">
				<view class="acco1-11">
					收款账号
				</view>
				<view class="acco1-12">
					<u-input v-model="value1" :type="type" :border="border" placeholder="请输入账号" input-align="right"/>
				</view>
			</view>
			<view class="acco1-1">
				<view class="acco1-11">
					收款银行
				</view>
				<view class="acco1-12">
					<u-input v-model="value2" :type="type" :border="border" placeholder="请输入银行" input-align="right"/>
				</view>
			</view>
		</view>
		<!-- 选择付款卡 -->
		<view class="acco2">
			<view class="acco2-1">
				付款卡
			</view>
			<view class="acco2-2">
				<image src="../../static/img/jiejikaaa.png" mode=""></image>
				<view class="acco2-21">
					<view>
						借记卡（{{code}}）
					</view>
					<view>
						可用余额 {{money}}元
=======
			<!-- 输入框 -->
			<view class="acco1">
				<view class="acco1-1">
					<view class="acco1-11">
						收款户名
					</view>
					<view class="acco1-12">
						<u-input v-model="value" :type="type" :border="border" placeholder="请输入名称"
							input-align="right" />
>>>>>>> b11b9d4ae23a968bcecccccf432d6647d1b6201f
					</view>
				</view>
				<view class="acco1-1">
					<view class="acco1-11">
						收款账号
					</view>
					<view class="acco1-12">
						<u-input v-model="value1" :type="type" :border="border" placeholder="请输入账号"
							input-align="right" />
					</view>
				</view>
				<view class="acco1-1">
					<view class="acco1-11">
						收款银行
					</view>
					<view class="acco1-12">
						<u-input v-model="value2" :type="type" :border="border" placeholder="请输入银行"
							input-align="right" />
					</view>
				</view>
			</view>
			<!-- 选择付款卡 -->
			<view class="acco2">
				<view class="acco2-1">
					付款卡
				</view>
				<view class="acco2-2">
					<image src="../../static/img/jiejikaaa.png" mode=""></image>
					<view class="acco2-21">
						<view>
							借记卡（{{code}}）
						</view>
						<view>
							可用余额 {{money}}元
						</view>
					</view>
					<image src="../../static/img/jiantouxiaa.png" mode=""></image>
				</view>
			</view>
			<!-- 输入转账金额 -->
			<view class="acco3">
				<view class="acco3-1">
					<view>
						转账金额
					</view>
					<view>
						转账说明
					</view>
				</view>
				<view class="acco3-2">
					<text>￥</text>
					<u-input v-model="value3" :type="type" :border="border" placeholder="0手续费" />
				</view>
				<view class="acco3-3">
					大写金额
				</view>
			</view>
			<!-- 转账附言 -->
			<view class="acco4">
				<view class="acco4-1">
					<view class="acco4-11">
						转账附言
					</view>
					<u-input v-model="value4" :type="type" :border="border" placeholder="请输入附言" input-align="right"
						placeholder-style="font-size: 35rpx; color:rgba(128, 128, 128,0.5)" class="acco4inp" />
				</view>
				<view class="acco4-2">
					<view @click="fy1">生活费</view>
					<view @click="fy2">还信用卡</view>
					<view @click="fy3">工资</view>
				</view>
			</view>
			<!-- 下一步 -->
			<view class="acco5" @click="onNextStep">
				下一步
			</view>
			<!-- 密码输入框和数字键盘 -->
			<u-keyboard @change="onChange" ref="uKeyboard" v-model="showKeyboard" @backspace="onBackspace" mode="number"
				:dot-enabled="false" :tooltip="false" default="">
				<view style="text-align: center;">
					请输入密码
				</view>
				<u-message-input mode="box" :maxlength="6" :dot-fill="true" v-model="password" :disabled-keyboard="true"
					@finish="finish"></u-message-input>
			</u-keyboard>
			<!-- 风险提示 -->
			<view class="acco6">
				<view class="">
					风险提示:
				</view>
				<view class="">
					1、请勿轻易向陌生人收款人转账，谨防电信网络诈骗，做到“陌生电话勿轻信，对方身份要核清，家中隐私勿泄漏，涉及钱财需小心，遇到事情勿惊慌，及时拨打110”。
				</view>
				<view class="">
					2、为了您的资金安全，请务必妥善保管银行卡号、密码等个人重要信息。
				</view>
			</view>
		</view>
	</view>
</template>

<script>
<<<<<<< HEAD
	import {hqtransfer,accounttran} from "../../API/transfer.js"
=======
	import {
		hqtransfer,
		accounttran
	} from "../../API/transfer.js"
>>>>>>> b11b9d4ae23a968bcecccccf432d6647d1b6201f
	export default {
		data() {
			return {
				value: '',
				type: 'text',
				border: false,
<<<<<<< HEAD
				value1:"",
				value2:"",
				value3:"",
				value4:"",
				showKeyboard: false,//密码输入的显示隐藏
				password: '',//输入的密码
				code:"",
				money:"",
				fullBankCard:""
=======
				value1: "",
				value2: "",
				value3: "",
				value4: "",
				showKeyboard: false, //密码输入的显示隐藏
				password: '', //输入的密码
				code: "",
				money: "",
				fullBankCard: ""
>>>>>>> b11b9d4ae23a968bcecccccf432d6647d1b6201f
			}
		},
		onShow() {
			this.BankAndSerial()
		},
		methods: {
<<<<<<< HEAD
			BankAndSerial(){
				hqtransfer().then((res)=>{
					if(res.data.code==200){
						console.log(res);
						this.code=res.data.result.bankCard
						this.money=res.data.result.serial
						this.fullBankCard=res.data.result.fullBankCard
					}else{
=======
			BankAndSerial() {
				hqtransfer().then((res) => {
					if (res.data.code == 200) {
						console.log(res);
						this.code = res.data.result.bankCard
						this.money = res.data.result.serial
						this.fullBankCard = res.data.result.fullBankCard
					} else {
>>>>>>> b11b9d4ae23a968bcecccccf432d6647d1b6201f
						uni.showToast({
							title: res.data.msg,
							icon: 'error'
						});
						return;
					}
<<<<<<< HEAD
				}).catch((err)=>{
					console.log("获取失败");
				})
			},
			fy1(){
				this.value4="生活费"
=======
				}).catch((err) => {
					console.log("获取失败");
				})
>>>>>>> b11b9d4ae23a968bcecccccf432d6647d1b6201f
			},
			fy1() {
				this.value4 = "生活费"
			},
			fy2() {
				this.value4 = "还信用卡"
			},
			fy3() {
				this.value4 = "工资"
			},
			// input判空
			validateInputs() {
<<<<<<< HEAD
			      if (
			        !this.value ||
			        !this.value1 ||
			        !this.value2 ||
			        !this.value3 ||
			        !this.value4
			      ) {
			        uni.showToast({
			          title: '必须将信息填写完整',
			          icon: 'error',
			        });
			        return false;
			      }
			      return true;
			    },
				// 点击下一步
				onNextStep() {
				      if (this.validateInputs()) {
				        // 当所有输入字段都填写时，执行下一步操作或导航到另一页
						this.showKeyboard = true;
						this.password='';//唤醒输入组件时清空密码 // 显示密码输入框
						
				      }
				},
				// 监听键盘输入：
				onChange(val) {
								if (this.password.length < 6) {
									this.password += val;
								}
				
								if (this.password.length >= 6) {
									this.finish();//封装的结束函数，我是在后续还有请求接口和判断等
								}
							},
				// 监听键盘回退：
				onBackspace(e) {
							if (this.password.length > 0) {
								this.password = this.password.substring(0, this.password.length - 1);
							}
						},
				// 结束函数：
				finish() {
							this.showKeyboard = false;
							console.log(this.value1);
							console.log(this.password);
							//可以放请求的接口及付款后的判断等
							accounttran({
								recipientCardNumber:this.value1,
								recipientName:this.value,
								recipientBank:this.value2,
								senderCardNumber:this.fullBankCard,
								amount:this.value3,
								payPassword:this.password
							}).then((res)=>{
								if(res.data.code==200){
									uni.navigateTo({
										url:"/pages/operator/operator"
									})
								}
							})
=======
				if (
					!this.value ||
					!this.value1 ||
					!this.value2 ||
					!this.value3 ||
					!this.value4
				) {
					uni.showToast({
						title: '必须将信息填写完整',
						icon: 'error',
					});
					return false;
>>>>>>> b11b9d4ae23a968bcecccccf432d6647d1b6201f
				}
				return true;
			},
			// 点击下一步
			onNextStep() {
				if (this.validateInputs()) {
					// 当所有输入字段都填写时，执行下一步操作或导航到另一页
					this.showKeyboard = true;
					this.password = ''; //唤醒输入组件时清空密码 // 显示密码输入框

				}
			},
			// 监听键盘输入：
			onChange(val) {
				if (this.password.length < 6) {
					this.password += val;
				}

				if (this.password.length >= 6) {
					this.finish(); //封装的结束函数，我是在后续还有请求接口和判断等
				}
			},
			// 监听键盘回退：
			onBackspace(e) {
				if (this.password.length > 0) {
					this.password = this.password.substring(0, this.password.length - 1);
				}
			},
			// 结束函数：
			finish() {
				this.showKeyboard = false;

				//可以放请求的接口及付款后的判断等
				accounttran({
					recipientCardNumber: this.value1,
					recipientName: this.value,
					recipientBank: this.value2,
					senderCardNumber: this.fullBankCard,
					amount: this.value3,
					paypassword: this.password
				}).then((res) => {
					console.log(this.value1);
					console.log(this.password);
					console.log(res);
				})
			}
		}
	}
</script>

<style>
	.acco {
		background-color: #f7f7f7;
		height: 1680rpx;
	}

	.acco1 {
		margin-top: 30rpx;
		background-color: white;
	}

	.acco1-1 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 90rpx;
		border-bottom: 1rpx solid rgba(128, 128, 128, 0.2);
		font-size: 35rpx;
	}

	.acco1-11 {
		margin-left: 20rpx;
	}

	.acco2 {
		background-color: white;
		height: 240rpx;
	}

	.acco2-1 {
		margin-left: 20rpx;
		margin-top: 20rpx;
		font-size: 35rpx;
		padding-top: 20rpx;
	}

	.acco1-12 {
		margin-right: 20rpx;
	}

	.acco2-2 {
		display: flex;
		justify-content: space-between;
		font-size: 30rpx;
		margin-top: 30rpx;
	}

	.acco2-21 {
		margin-left: -350rpx;
	}

	.acco2-21 view:nth-child(2) {
		font-size: 28rpx;
		color: rgb(128, 128, 128);
		margin-top: 10rpx;
	}

	.acco2-2 image {
		width: 50rpx;
		height: 50rpx;
		margin-left: 28rpx;
		margin-right: 20rpx;
	}

	.acco3 {
		height: 330rpx;
		background-color: white;
		margin-top: 30rpx;
	}

	.acco3-1 {
		display: flex;
		justify-content: space-between;
	}

	.acco3-1 view:nth-child(1) {
		font-size: 40rpx;
		/* font-weight: 600; */
		margin-top: 20rpx;
		margin-left: 20rpx;
	}

	.acco3-1 view:nth-child(2) {
		font-size: 30rpx;
		color: rgb(0, 186, 158);
		margin-top: 20rpx;
		margin-right: 30rpx;
	}

	.acco3-2 {
		height: 180rpx;
		border-bottom: 1rpx solid rgba(128, 128, 128, 0.2);
		display: flex;
		align-items: center;
		font-size: 80rpx;
	}

	.acco3-3 {
		font-size: 30rpx;
		color: rgb(128, 128, 128);
		margin-top: 20rpx;
		margin-left: 20rpx;
	}

	.acco4 {
		height: 220rpx;
		background-color: white;
		margin-top: 25rpx;
	}

	.acco4-1 {
		display: flex;
		justify-content: space-between;
		border-bottom: 1rpx solid rgba(128, 128, 128, 0.2);
		height: 100rpx;
	}

	.acco4-11 {
		font-size: 35rpx;
		margin-top: 20rpx;
		margin-left: 20rpx;
	}

	.acco4inp {
		margin-top: 10rpx;
		margin-right: 30rpx;
	}

	.acco4-2 view {
		color: rgb(128, 128, 128);
		border: 1rpx solid rgba(128, 128, 128, 0.6);
		border-radius: 30rpx;
		height: 65rpx;
		width: 170rpx;
		font-size: 30rpx;
		text-align: center;
		line-height: 65rpx;
		margin: 10rpx 40rpx;
	}

	.acco4-2 {
		display: flex;
		margin-top: 20rpx;
	}

	.acco5 {
		width: 700rpx;
		height: 100rpx;
		background-color: #ffa500ad;
		margin-left: 30rpx;
		color: white;
		text-align: center;
		line-height: 100rpx;
		border-radius: 10rpx;
		margin-top: 80rpx;
	}

	.acco6 {
		font-size: 32rpx;
		width: 700rpx;
		color: rgb(128, 128, 128);
		margin-left: 20rpx;
		margin-top: 50rpx;
	}
</style>